<template>
  <div>
    <a-upload
      :action="uploadImageActioc"
      :headers="{ Token: userStore.token }"
      :data="uploadConfig.data"
      :accept="uploadConfig.accept"
      :multiple="uploadConfig.multiple"
      :limit="uploadConfig.limit"
      :name="uploadConfig.name"
      :list-type="uploadConfig.pictureCard"
      @success="uploadSuccess"
      @error="uploadError"
    >
      <img v-if="uploadConfig.imageUrl" :src="uploadConfig.imageUrl" />
      <div v-else-if="uploadConfig.pictureCard == 'picture-card'" class="avatar-uploader-icon">
        <span class="iconfont icon-shangchuan"></span>
      </div>
      <a-button v-else type="primary"
        ><span class="iconfont icon-shangchuan"></span> &nbsp;&nbsp;&nbsp;&nbsp;上传文件</a-button
      >
    </a-upload>
  </div>
</template>

<script setup>
import { uploadImageActioc } from '@/api/system'
import { useUserStore } from '@/stores'

const props = defineProps({
  uploadConfig: {
    type: Object,
    default: {
      width: '100px',
      height: '100px',
      imageUrl: '',
      pictureCard: '',
      data: {},
      accept: 'image/png,image/jpg,image/jpeg',
      multiple: false,
      limit: 1,
      name: 'url'
    }
  }
})

const userStore = useUserStore()

const emits = defineEmits(['uploadSuccess'])

//文件上传成功时的钩子
const uploadSuccess = (response) => {
  emits('uploadSuccess', response.response)
}
//上传失败
const uploadError = (file) => {
  Message.error(file.response.msg)
}
</script>

<style lang="scss" scoped>
</style>